<template>
  <el-row :gutter="15">
    <el-col :sm="24" :md="24" :lg="23" class="table-margin">
      <el-descriptions :column="3" border :labelStyle="{ width: '150px' }">
        <!-- 企业 -->
        <template v-if="detail.memberType==1">
          <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
            <template slot="label">企业名称</template>
            {{ detail.enterpriseName || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
            <template slot="label">统一社会信用代码</template>
            {{ detail.creditCode || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label">
            <template slot="label">企业地址</template>
            {{ detail.enterpriseAdderss || '--' }}

          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" :span="3">
            <template slot="label">营业执照</template>
            <el-image
              v-if="detail.businessLicenseUrl"
              :src="getImgUrl(detail.businessLicenseUrl) | mmvImageUrl"
              :preview-src-list="srcList"
              @click="vbs(detail.businessLicenseUrl)"
              style="width: 160px; height: 90px; margin-right: 15px"
              fit="contain"
            ></el-image>
          </el-descriptions-item>


          <el-descriptions-item label-class-name="my-descriptions-label">
            <template slot="label">企业联系人</template>
            {{ detail.memberName }}
          </el-descriptions-item>
        </template>


        <template v-else>
          <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
            <template slot="label">客户名称</template>
            {{ detail.memberName }}
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
            <template slot="label">微信名称</template>
            {{ detail.vxName || '--' }}
          </el-descriptions-item>
        </template>

        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">联系方式</template>
          {{ detail.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">联系地址</template>
          {{ detail.contactAddress }}
        </el-descriptions-item>

        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">客户状态</template>
          {{ detail.memberStatus == 2 ? '黑名单' : '正常' }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">实名认证状态</template>
          {{ detail.censorStatus == 2 ? '已认证' : '未认证' }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">客户类型</template>
          {{ detail.memberType | memberType }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">客户来源</template>
          <dict-tag
            :options="dict.type.memberSource"
            :value="detail.memberSource"
          />
        </el-descriptions-item>

        <el-descriptions-item label-class-name="my-descriptions-label" v-if="detail.historyPhone">
          <template slot="label">历史号码</template>
          {{ detail.historyPhone }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">客户标签</template>
          <el-tag
            type="success"
            v-for="(label, index) in detail.labelClassify"
            :key="index"
            style="margin-left: 1%"
          >
            <div>
              <dict-tag
                :options="dict.type.label_classify"
                :value="label"
              />
            </div>
          </el-tag>
        </el-descriptions-item>

        <template v-if="detail.authenticationStatus>0 ">
          <el-descriptions-item label-class-name="my-descriptions-label">
            <template slot="label">印章名称</template>
            {{ detail.sealName || '--' }}
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label">
            <template slot="label">邮箱</template>
            {{ detail.email || '--' }}
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label">
            <template slot="label">电子合同认证状态</template>
            <template>
              <span class="authenticationStatus"
                    :class="[{active1:detail.authenticationStatus==4},{active2:detail.authenticationStatus==3}]">{{ detail.authenticationStatus|authenticationStatus }}</span>
              <el-button v-if="detail.authenticationStatus!=1 && detail.authenticationUrl && detail.authenticationUrl!='' " type="text" @click="goAuthResult">查看认证结果</el-button>
              <el-button type="text" @click="sendAuthentication">认证</el-button>
            </template>
          </el-descriptions-item>
        </template>

      </el-descriptions>
    </el-col>
    <el-col :sm="24" :md="24" :lg="23" class="table-margin">
      <el-descriptions :column="3" :labelStyle="{ width: '150px' }" border>
        <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
          <template slot="label">证件类型</template>
          <dict-tag
            :options="dict.type.document_type"
            :value="parseInt(detail.documentType)"
          />
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
          <template slot="label">证件号码</template>
          {{ detail.cardId }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label">
          <template slot="label">失效日期</template>
          {{ detail.cardValidity }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3">
          <template slot="label">证件正反面</template>
          <el-image
            v-if="detail.idCardUrl"
            :src="getImgUrl(detail.idCardUrl) | mmvImageUrl"
            :preview-src-list="srcList"
            @click="vbs(detail.idCardUrl)"
            style="width: 160px; height: 90px; margin-right: 15px"
            fit="contain"
          ></el-image>
          <el-image
            v-if="detail.idCardBackUrl"
            :src="getImgUrl(detail.idCardBackUrl) | mmvImageUrl"
            :preview-src-list="srcList"
            @click="vbs(detail.idCardBackUrl)"
            style="width: 160px; height: 90px; margin-right: 15px"
            fit="contain"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
      <br/>
      <el-descriptions :column="3" :labelStyle="{ width: '150px' }" border>
        <el-descriptions-item label-class-name="my-descriptions-label" content-class-name="my-content">
          <template slot="label">驾驶证类型</template>
          {{ detail.drivingType }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="2">
          <template slot="label">失效日期</template>
          {{ detail.drivingValidity }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3">
          <template slot="label">驾驶证正副页</template>
          <el-image
            v-if="detail.driverUrl"
            :src="getImgUrl(detail.driverUrl) | mmvImageUrl"
            :preview-src-list="srcList"
            @click="vbs(detail.driverUrl)"
            style="width: 160px; height: 90px; margin-right: 15px"
            fit="contain"
          ></el-image>
          <el-image
            v-if="detail.driverBackUrl"
            :src="getImgUrl(detail.driverBackUrl) | mmvImageUrl"
            :preview-src-list="srcList"
            @click="vbs(detail.driverBackUrl)"
            style="width: 160px; height: 90px; margin-right: 15px"
            fit="contain"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-col>
  </el-row>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import {authenticationStatus} from "@/utils/filters";
import {memberCertification} from "@/api/customer/customer";

export default {
  components: {
    MmvTitle,
  },
  dicts: [
    'label_classify',
    'document_type',
    'memberSource'
  ],
  filters: {
    memberType(val) {
      return (
        {
          1: '企业',
          2: '个人',
        }[Number(val)] || '--'
      )
    },
    memberSource(val) {
      return (
        {
          1: '搜索',
          2: '分享',
          3: '扫码',
          4: '手动录入',
        }[Number(val)] || '--'
      )
    },
  },
  props: {
    detail: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      electronicContractEnable:this.$route.query.electronicContractEnable,
      srcList: [],
    }
  },
  mounted() {
  },
  methods: {



    vbs(val) {
      this.srcList = []
      this.srcList.push(this.getImgUrl(val))
    },
    goAuthResult() {
      if (this.detail.authenticationUrl) {
        window.open(this.detail.authenticationUrl, '_blank')
      }else  {
        this.$message('无效地址')
      }

    },
    //发起认证
    sendAuthentication(row) {
      this.$alert('确定发起认证吗?', '发起认证', {
        confirmButtonText: '确定',
        callback: action => {
          if (action == 'confirm') {
            memberCertification(this.detail.memberNo).then(res => {
              this.$message({
                type: 'success',
                message: '发起成功'
              });
              this.$emit('refreshMemberInfo');
            })
          }
        }
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.my-content {
  width: 300px !important;
}

.authenticationStatus {
  margin-right: 10px;

  &.active1 {
    color: #00c585;
  }

  &.active2 {
    color: red;
  }
}

</style>
